<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>行情预测</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.forecast-container {
			padding: 20px;
			max-width: 1400px;
			margin: 0 auto;
		}
		.page-title {
			margin-bottom: 25px;
		}
		.page-title h2 {
			margin: 0 0 8px 0;
			color: #333;
			font-size: 24px;
		}
		.page-title p {
			margin: 0;
			color: #666;
			font-size: 14px;
		}
		
		/* 预测概览 */
		.forecast-overview {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			border-radius: 15px;
			padding: 30px;
			margin-bottom: 25px;
			box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
		}
		.overview-title {
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 20px;
			text-align: center;
		}
		.overview-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 20px;
		}
		.overview-item {
			text-align: center;
			background: rgba(255,255,255,0.1);
			padding: 20px;
			border-radius: 10px;
		}
		.overview-icon {
			font-size: 36px;
			margin-bottom: 12px;
		}
		.overview-value {
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 5px;
		}
		.overview-label {
			font-size: 14px;
			opacity: 0.9;
		}
		.overview-trend {
			font-size: 12px;
			margin-top: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4px;
		}
		
		/* 内容布局 */
		.content-layout {
			display: grid;
			grid-template-columns: 2fr 1fr;
			gap: 25px;
			margin-bottom: 25px;
		}
		.content-left {
			display: flex;
			flex-direction: column;
			gap: 25px;
		}
		.content-right {
			display: flex;
			flex-direction: column;
			gap: 25px;
		}
		
		/* 通用卡片 */
		.forecast-card {
			background: #fff;
			border-radius: 12px;
			padding: 25px;
			box-shadow: 0 4px 20px rgba(0,0,0,0.08);
		}
		.card-title {
			font-size: 18px;
			font-weight: 600;
			color: #333;
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			gap: 10px;
		}
		
		/* 预测选择器 */
		.forecast-selector {
			display: flex;
			gap: 15px;
			margin-bottom: 20px;
			flex-wrap: wrap;
		}
		.selector-item {
			flex: 1;
			min-width: 120px;
		}
		
		/* 图表容器 */
		.chart-container {
			height: 350px;
			margin-top: 15px;
		}
		.small-chart {
			height: 250px;
		}
		
		/* 预测结果 */
		.prediction-list {
			display: flex;
			flex-direction: column;
			gap: 15px;
		}
		.prediction-item {
			padding: 15px;
			border: 1px solid #f0f2f5;
			border-radius: 8px;
			transition: all 0.2s;
		}
		.prediction-item:hover {
			background: #f8f9fa;
			border-color: #667eea;
		}
		.prediction-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
		}
		.prediction-product {
			font-weight: 500;
			color: #333;
		}
		.prediction-confidence {
			padding: 4px 8px;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 500;
		}
		.confidence-high {
			background: #f6ffed;
			color: #52c41a;
		}
		.confidence-medium {
			background: #fff7e6;
			color: #fa8c16;
		}
		.confidence-low {
			background: #fff1f0;
			color: #ff4d4f;
		}
		.prediction-content {
			font-size: 14px;
			color: #666;
			line-height: 1.5;
		}
		.prediction-trend {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-top: 8px;
		}
		.trend-icon {
			font-size: 16px;
		}
		.trend-up {
			color: #e74c3c;
		}
		.trend-down {
			color: #27ae60;
		}
		.trend-stable {
			color: #95a5a6;
		}
		
		/* 影响因素 */
		.factor-list {
			display: flex;
			flex-direction: column;
			gap: 12px;
		}
		.factor-item {
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 12px;
			background: #f8f9fa;
			border-radius: 6px;
		}
		.factor-icon {
			width: 32px;
			height: 32px;
			background: #667eea;
			color: white;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
		}
		.factor-content {
			flex: 1;
		}
		.factor-title {
			font-weight: 500;
			color: #333;
			margin-bottom: 2px;
		}
		.factor-desc {
			font-size: 12px;
			color: #666;
		}
		.factor-impact {
			padding: 4px 8px;
			border-radius: 4px;
			font-size: 11px;
			font-weight: 500;
		}
		.impact-high {
			background: #fff1f0;
			color: #ff4d4f;
		}
		.impact-medium {
			background: #fff7e6;
			color: #fa8c16;
		}
		.impact-low {
			background: #f6ffed;
			color: #52c41a;
		}
		
		/* 模型准确率 */
		.accuracy-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 15px;
		}
		.accuracy-item {
			text-align: center;
			padding: 20px;
			background: #f8f9fa;
			border-radius: 8px;
		}
		.accuracy-value {
			font-size: 28px;
			font-weight: bold;
			color: #667eea;
			margin-bottom: 8px;
		}
		.accuracy-label {
			font-size: 14px;
			color: #666;
		}
		
		/* 响应式设计 */
		@media (max-width: 1200px) {
			.content-layout {
				grid-template-columns: 1fr;
			}
		}
		@media (max-width: 768px) {
			.overview-grid {
				grid-template-columns: repeat(2, 1fr);
			}
			.forecast-selector {
				flex-direction: column;
			}
			.accuracy-grid {
				grid-template-columns: 1fr;
			}
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="forecast-container">
			<!-- 页面标题 -->
			<div class="page-title">
				<h2>行情预测</h2>
				<p>基于AI数据模型的价格与供需预测分析</p>
			</div>

			<!-- 预测概览 -->
			<div class="forecast-overview">
				<div class="overview-title">未来7天行情预测概览</div>
				<div class="overview-grid">
					<div class="overview-item">
						<div class="overview-icon">📈</div>
						<div class="overview-value">{{forecastOverview.priceIndex}}</div>
						<div class="overview-label">预测价格指数</div>
						<div class="overview-trend">
							<i class="el-icon-caret-top"></i>
							上涨 {{forecastOverview.priceChange}}%
						</div>
					</div>
					<div class="overview-item">
						<div class="overview-icon">📊</div>
						<div class="overview-value">{{forecastOverview.demandIndex}}</div>
						<div class="overview-label">需求预测指数</div>
						<div class="overview-trend">
							<i class="el-icon-caret-top"></i>
							增长 {{forecastOverview.demandChange}}%
						</div>
					</div>
					<div class="overview-item">
						<div class="overview-icon">🏭</div>
						<div class="overview-value">{{forecastOverview.supplyIndex}}</div>
						<div class="overview-label">供应预测指数</div>
						<div class="overview-trend">
							<i class="el-icon-caret-bottom"></i>
							下降 {{forecastOverview.supplyChange}}%
						</div>
					</div>
					<div class="overview-item">
						<div class="overview-icon">🎯</div>
						<div class="overview-value">{{forecastOverview.accuracy}}%</div>
						<div class="overview-label">预测准确率</div>
						<div class="overview-trend">
							<i class="el-icon-check"></i>
							高置信度
						</div>
					</div>
				</div>
			</div>

			<!-- 预测控制器 -->
			<div class="forecast-card">
				<div class="card-title">
					<i class="el-icon-setting"></i>
					预测参数设置
				</div>
				<div class="forecast-selector">
					<div class="selector-item">
						<el-select v-model="selectedCategory" placeholder="选择商品类别" style="width: 100%;">
							<el-option v-for="category in categories" :key="category.value" 
								:label="category.label" :value="category.value"></el-option>
						</el-select>
					</div>
					<div class="selector-item">
						<el-select v-model="selectedRegion" placeholder="选择地区" style="width: 100%;">
							<el-option v-for="region in regions" :key="region.value" 
								:label="region.label" :value="region.value"></el-option>
						</el-select>
					</div>
					<div class="selector-item">
						<el-select v-model="selectedPeriod" placeholder="预测周期" style="width: 100%;">
							<el-option v-for="period in periods" :key="period.value" 
								:label="period.label" :value="period.value"></el-option>
						</el-select>
					</div>
					<div class="selector-item">
						<el-button type="primary" icon="el-icon-refresh" @click="updateForecast" style="width: 100%;">
							更新预测
						</el-button>
					</div>
				</div>
			</div>

			<!-- 内容布局 -->
			<div class="content-layout">
				<!-- 左侧内容 -->
				<div class="content-left">
					<!-- 价格预测趋势 -->
					<div class="forecast-card">
						<div class="card-title">
							<i class="el-icon-trending-up"></i>
							价格预测趋势
						</div>
						<div class="chart-container" id="priceChart"></div>
					</div>

					<!-- 供需预测 -->
					<div class="forecast-card">
						<div class="card-title">
							<i class="el-icon-scale"></i>
							供需预测分析
						</div>
						<div class="chart-container" id="supplyDemandChart"></div>
					</div>

					<!-- 季节性预测 -->
					<div class="forecast-card">
						<div class="card-title">
							<i class="el-icon-date"></i>
							季节性趋势预测
						</div>
						<div class="chart-container small-chart" id="seasonChart"></div>
					</div>
				</div>

				<!-- 右侧内容 -->
				<div class="content-right">
					<!-- 重点商品预测 -->
					<div class="forecast-card">
						<div class="card-title">
							<i class="el-icon-goods"></i>
							重点商品预测
						</div>
						<div class="prediction-list">
							<div v-for="prediction in keyPredictions" :key="prediction.id" class="prediction-item">
								<div class="prediction-header">
									<span class="prediction-product">{{prediction.product}}</span>
									<span :class="['prediction-confidence', 'confidence-' + prediction.confidence]">
										{{prediction.confidenceText}}
									</span>
								</div>
								<div class="prediction-content">{{prediction.forecast}}</div>
								<div class="prediction-trend">
									<i :class="['trend-icon', 'el-icon-caret-' + (prediction.trend === 'up' ? 'top' : prediction.trend === 'down' ? 'bottom' : 'right'), 'trend-' + prediction.trend]"></i>
									<span>预期{{prediction.trendText}} {{prediction.changePercent}}%</span>
								</div>
							</div>
						</div>
					</div>

					<!-- 影响因素 -->
					<div class="forecast-card">
						<div class="card-title">
							<i class="el-icon-warning"></i>
							关键影响因素
						</div>
						<div class="factor-list">
							<div v-for="factor in influenceFactors" :key="factor.id" class="factor-item">
								<div class="factor-icon">
									<i :class="factor.icon"></i>
								</div>
								<div class="factor-content">
									<div class="factor-title">{{factor.title}}</div>
									<div class="factor-desc">{{factor.description}}</div>
								</div>
								<div :class="['factor-impact', 'impact-' + factor.impact]">
									{{factor.impactText}}
								</div>
							</div>
						</div>
					</div>

					<!-- 模型准确率 -->
					<div class="forecast-card">
						<div class="card-title">
							<i class="el-icon-data-analysis"></i>
							预测模型准确率
						</div>
						<div class="accuracy-grid">
							<div class="accuracy-item">
								<div class="accuracy-value">{{modelAccuracy.shortTerm}}%</div>
								<div class="accuracy-label">短期预测(7天)</div>
							</div>
							<div class="accuracy-item">
								<div class="accuracy-value">{{modelAccuracy.longTerm}}%</div>
								<div class="accuracy-label">长期预测(30天)</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 引入依赖 -->
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script src="https://unpkg.com/echarts@5.4.3/dist/echarts.min.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					selectedCategory: 'vegetables',
					selectedRegion: 'beijing',
					selectedPeriod: '7days',
					categories: [
						{value: 'vegetables', label: '蔬菜类'},
						{value: 'fruits', label: '水果类'},
						{value: 'meat', label: '肉类'},
						{value: 'seafood', label: '水产类'},
						{value: 'dairy', label: '乳制品'},
						{value: 'grains', label: '粮油类'}
					],
					regions: [
						{value: 'beijing', label: '北京'},
						{value: 'shanghai', label: '上海'},
						{value: 'guangzhou', label: '广州'},
						{value: 'shenzhen', label: '深圳'},
						{value: 'hangzhou', label: '杭州'}
					],
					periods: [
						{value: '7days', label: '7天'},
						{value: '15days', label: '15天'},
						{value: '30days', label: '30天'},
						{value: '60days', label: '60天'}
					],
					forecastOverview: {
						priceIndex: 115.8,
						priceChange: 3.2,
						demandIndex: 108.5,
						demandChange: 5.8,
						supplyIndex: 102.3,
						supplyChange: 2.1,
						accuracy: 89.5
					},
					keyPredictions: [
						{
							id: 1,
							product: '有机白菜',
							forecast: '预计未来7天价格将上涨，主要受供应减少和需求增长影响',
							trend: 'up',
							trendText: '上涨',
							changePercent: 8.5,
							confidence: 'high',
							confidenceText: '高置信度'
						},
						{
							id: 2,
							product: '进口三文鱼',
							forecast: '价格可能小幅波动，国际运输成本影响价格稳定性',
							trend: 'stable',
							trendText: '波动',
							changePercent: 2.1,
							confidence: 'medium',
							confidenceText: '中等置信度'
						},
						{
							id: 3,
							product: '新鲜苹果',
							forecast: '季节性因素导致供应增加，预期价格将有所下降',
							trend: 'down',
							trendText: '下降',
							changePercent: 5.2,
							confidence: 'high',
							confidenceText: '高置信度'
						},
						{
							id: 4,
							product: '冷冻虾仁',
							forecast: '需求旺盛但供应链受限，价格上涨压力较大',
							trend: 'up',
							trendText: '上涨',
							changePercent: 12.3,
							confidence: 'medium',
							confidenceText: '中等置信度'
						}
					],
					influenceFactors: [
						{
							id: 1,
							icon: 'el-icon-cloudy',
							title: '天气变化',
							description: '近期天气波动影响产地供应',
							impact: 'high',
							impactText: '高影响'
						},
						{
							id: 2,
							icon: 'el-icon-truck',
							title: '运输成本',
							description: '燃油价格上涨推高物流成本',
							impact: 'medium',
							impactText: '中等影响'
						},
						{
							id: 3,
							icon: 'el-icon-present',
							title: '节假日需求',
							description: '节日临近，消费需求预期增长',
							impact: 'high',
							impactText: '高影响'
						},
						{
							id: 4,
							icon: 'el-icon-coin',
							title: '政策因素',
							description: '农产品扶持政策影响供应',
							impact: 'low',
							impactText: '低影响'
						}
					],
					modelAccuracy: {
						shortTerm: 89.5,
						longTerm: 76.8
					}
				}
			},
			methods: {
				initCharts() {
					this.initPriceChart();
					this.initSupplyDemandChart();
					this.initSeasonChart();
				},
				
				initPriceChart() {
					const chart = echarts.init(document.getElementById('priceChart'));
					
					const dates = [];
					const actualData = [];
					const predictedData = [];
					
					// 历史数据
					for (let i = 30; i >= 1; i--) {
						const date = new Date();
						date.setDate(date.getDate() - i);
						dates.push((date.getMonth() + 1) + '/' + date.getDate());
						actualData.push(Math.round((Math.random() * 20 + 100) * 10) / 10);
						predictedData.push(null);
					}
					
					// 预测数据
					for (let i = 0; i < 7; i++) {
						const date = new Date();
						date.setDate(date.getDate() + i);
						dates.push((date.getMonth() + 1) + '/' + date.getDate());
						actualData.push(null);
						predictedData.push(Math.round((Math.random() * 15 + 110) * 10) / 10);
					}
					
					const option = {
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross'
							}
						},
						legend: {
							data: ['历史价格', '预测价格', '置信区间']
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							data: dates,
							axisPointer: {
								show: true
							}
						},
						yAxis: {
							type: 'value',
							axisLabel: {
								formatter: '{value}'
							}
						},
						series: [
							{
								name: '历史价格',
								type: 'line',
								data: actualData,
								smooth: true,
								lineStyle: {color: '#409EFF'},
								itemStyle: {color: '#409EFF'}
							},
							{
								name: '预测价格',
								type: 'line',
								data: predictedData,
								smooth: true,
								lineStyle: {
									color: '#F56C6C',
									type: 'dashed'
								},
								itemStyle: {color: '#F56C6C'}
							}
						]
					};
					
					chart.setOption(option);
					window.addEventListener('resize', () => chart.resize());
				},
				
				initSupplyDemandChart() {
					const chart = echarts.init(document.getElementById('supplyDemandChart'));
					
					const dates = [];
					const supplyData = [];
					const demandData = [];
					
					for (let i = 0; i < 14; i++) {
						const date = new Date();
						date.setDate(date.getDate() + i);
						dates.push((date.getMonth() + 1) + '/' + date.getDate());
						
						supplyData.push(Math.round((Math.random() * 20 + 90) * 10) / 10);
						demandData.push(Math.round((Math.random() * 25 + 95) * 10) / 10);
					}
					
					const option = {
						tooltip: {
							trigger: 'axis'
						},
						legend: {
							data: ['供应预测', '需求预测']
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							data: dates
						},
						yAxis: {
							type: 'value'
						},
						series: [
							{
								name: '供应预测',
								type: 'line',
								data: supplyData,
								smooth: true,
								lineStyle: {color: '#67C23A'},
								areaStyle: {
									color: {
										type: 'linear',
										x: 0, y: 0, x2: 0, y2: 1,
										colorStops: [{
											offset: 0, color: 'rgba(103, 194, 58, 0.3)'
										}, {
											offset: 1, color: 'rgba(103, 194, 58, 0.05)'
										}]
									}
								}
							},
							{
								name: '需求预测',
								type: 'line',
								data: demandData,
								smooth: true,
								lineStyle: {color: '#E6A23C'},
								areaStyle: {
									color: {
										type: 'linear',
										x: 0, y: 0, x2: 0, y2: 1,
										colorStops: [{
											offset: 0, color: 'rgba(230, 162, 60, 0.3)'
										}, {
											offset: 1, color: 'rgba(230, 162, 60, 0.05)'
										}]
									}
								}
							}
						]
					};
					
					chart.setOption(option);
					window.addEventListener('resize', () => chart.resize());
				},
				
				initSeasonChart() {
					const chart = echarts.init(document.getElementById('seasonChart'));
					
					const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
					const seasonData = [95, 92, 98, 105, 110, 115, 118, 116, 108, 102, 98, 96];
					
					const option = {
						tooltip: {
							trigger: 'axis'
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							data: months
						},
						yAxis: {
							type: 'value',
							name: '价格指数'
						},
						series: [{
							name: '季节性指数',
							type: 'line',
							data: seasonData,
							smooth: true,
							lineStyle: {color: '#722ED1'},
							itemStyle: {color: '#722ED1'},
							areaStyle: {
								color: {
									type: 'linear',
									x: 0, y: 0, x2: 0, y2: 1,
									colorStops: [{
										offset: 0, color: 'rgba(114, 46, 209, 0.3)'
									}, {
										offset: 1, color: 'rgba(114, 46, 209, 0.05)'
									}]
								}
							}
						}]
					};
					
					chart.setOption(option);
					window.addEventListener('resize', () => chart.resize());
				},
				
				updateForecast() {
					this.$message.success('预测数据已更新');
					// 模拟更新预测数据
					this.forecastOverview.priceIndex += (Math.random() - 0.5) * 5;
					this.forecastOverview.priceIndex = Math.round(this.forecastOverview.priceIndex * 10) / 10;
				}
			},
			
			mounted() {
				this.$nextTick(() => {
					this.initCharts();
				});
			}
		});
	</script>
</body>
</html>